<template>
	<!--pages/binding-phone/binding-phone.wxml-->
	<view class='container'>
		<view class='binding-phone'>
			<!-- <block wx:for='{{couponList}}' wx:key=''> -->
			<view class='item'>
				<text class='item-tip'>手机号码：</text>
				<input placeholder='输入手机号码' type='number' maxlength='11' v-model="phonenum" @input="onPhoneInput($event)" />
			</view>
			<view class='item '>
				<text class='item-tip'>验证码：</text>
				<input placeholder='输入验证码' type='number' v-model="code" @input="onCodeInput($event)" />
				<text class='get-code gray' @click='getCodeNumber($evnet)'>获取验证码</text>
			</view>
			<!-- </block> -->
		</view>

		<view class='btn-box'>
			<text v-if="phonenum && code" class='sure-btn' @click="bindMobile($event)">确定</text>
			<text v-if="!phonenum || !code" class='sure-btn gray'>确定</text>
		</view>
	</view>
</template>

<script>
import { request } from '../../utils/http.js'
export default {
	data() {
		return {
			phonenum: '',
			code: '',
		}
	},
	methods: {
		onPhoneInput(e) {
			this.phonenum = e.detail.value
		},
		onCodeInput(e) {
			this.code = e.detail.value
		},
		getCodeNumber(e) {
			if (!this.phonenum) {
				uni.showToast({
					title: '请输入手机号',
					icon: "none"
				})
				return;
			}
			var params = {
				url: "/p/sms/send",
				method: "POST",
				data: {
					// phonenum: this.data.phonenum,
					// code: this.data.code
					mobile: this.phonenum
				},
				callBack: (res) => { }
			};
			request(params);
		},
		bindMobile(e) {
			var params = {
				url: '/user/registerOrBindUser',
				method: 'PUT',
				data: {
					appType: 1, // 微信小程序
					mobile: this.phonenum,
					validCode: this.code,
					validateType: 1, // 验证类型:1验证码验证 ,
					registerOrBind: 2 // 验证类型 1注册 2绑定
				},
				callBack: res => {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				},
			}
			request(params)
		}
	}
}
</script>

<style>
/* pages/binding-phone/binding-phone.wxss */

page {
	background: #f4f4f4;
}

.binding-phone {
	height: 100%;
	margin-top: 20rpx;
	background: #fff;
}

.binding-phone .item {
	display: flex;
	padding: 20rpx 0;
	height: 60rpx;
	line-height: 60rpx;
	border-bottom: 2rpx solid #e1e1e1;
}

.binding-phone .item:last-child {
	border: none;
}

.binding-phone .item input {
	flex: 1;
	height: auto;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.binding-phone .item .item-tip {
	width: 140rpx;
	font-size: 28rpx;
	padding-left: 20rpx;
}

.binding-phone .item .get-code {
	font-size: 30rpx;
	color: #999;
	margin-right: 20rpx;
	text-align: center;
}

.binding-phone .item .get-code.gray {
	color: #3eb370;
}

.btn-box {
	padding: 0 20rpx;
	margin-top: 60rpx;
}

.btn-box .sure-btn {
	display: block;
	font-size: 32rpx;
	color: #fff;
	background: #3eb370;
	width: 100%;
	margin: auto;
	text-align: center;
	padding: 20rpx 0;
	border-radius: 50rpx;
}

.btn-box .sure-btn.gray {
	background: #e1e1e1;
	margin-bottom: 30rpx;
}
</style>
